import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] = useState<any>([]);
  const [dataList,setDataList] = useState<any>([
    {
      name12:'HK.202301020311',
      name:'上海XXXX医院',
      orderCode:'ORDER001211',
      name11:'SO.202301020312001',
      times:'3',
      price1:300000,
      price2:400000,
      type:'1'
    },
    {
      name12:'HK.202301020312',
      name:'上海XXXX医院',
      orderCode:'ORDER001213',
      name11:'SO.202301020312001',
      times:'3',
      price1:300000,
      price2:400000,
      type:'1'
    },
    {
      name12:'HK.202301020313',
      name:'北京XXXX医院',
      orderCode:'ORDER001212',
      name11:'SO.202301020312001',
      times:'2',
      price1:600000,
      price2:700000,
      type:'2'
    },
    {
      name12:'HK.202301020314',
      name:'上海XXXX医院',
      orderCode:'ORDER001215',
      name11:'SO.202301020312001',
      times:'3',
      price1:300000,
      price2:400000,
      type:'1'
    },
  ]);
  const columns:ProColumns[] = [
    {
      title:'付款编码',
      dataIndex: 'name12',
      ellipsis:true,
      width:150,
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
    },
    {
      title:'订单号',
      dataIndex: 'orderCode',
      ellipsis:true,
      width:150,
    },
    {
      title:'合同编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
    },
    {
      title:'期数',
      dataIndex: 'times',
      hideInSearch:true,
      width:80,
    },
    {
      title:'付款金额',
      dataIndex: 'price1',
      width:100,
      valueType:'money',
      renderText:()=>'300000'
    },
    {
      title:'合同金额',
      dataIndex: 'price2',
      width:100,
      valueType:'money',
    },
    {
      title:'付款方式',
      dataIndex: 'type',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'现金',
        '2':'转账',
        '3':'电汇',
        '4':'支票'
      },
    },
    {
      title:'创建人',
      dataIndex: 'date5',
      width:100,
      renderText:()=>'张三'
    },
    {
      title:'创建日期',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-01-20'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>今日新增</span>,
            },
            {
              key: 'tab5',
              label: <span>本周新增</span>,
            },
            {
              key: 'tab3',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab4',
              label: <span>我协同的</span>,
            },
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormText name="name" width={'md'} label="客户名称" rules={[{ required: true}]}/>
            <ProFormSelect name="name1" width={'md'} label="合同编码" rules={[{ required: true}]} options={[{label:'商机xxxx1',value:'0'}]}/>
            <ProFormDigit name="name2" width={'md'} label="期数"/>
          </ProFormGroup>
          <ProFormGroup>
            <ProFormDatePicker name="date" width={'md'}  label="付款日期" rules={[{ required: true}]}/>
            <ProFormDigit name="name" width={'md'} label="付款金额" rules={[{ required: true}]}/>
            <ProFormSelect name="name9" width={'md'} label="付款方式" options={[{label:'现金',value:'1'},{label:'转账',value:'2'},{label:'电汇',value:'3'},{label:'支票',value:'4'}]} />
          </ProFormGroup>
         
          <div style={{height:20}}></div>
          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}